<!DOCTYPE html>
<html lang="en">

<link>
<meta charset="UTF-8">
<title>数据看板</title>
<link href="./css/index.css" rel="stylesheet">
<script src="plugins/jquery-2.1.1.min.js"></script>
<script src="plugins/echarts.min.js"></script>
<script src="plugins/china.js"></script>
<script src="./js/index.js"></script>
<!-- <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->

</head>

<body ondbclick='stopScale(event);'>
    <div class="wrapper" id='wrapper'>
        <div class="top-box">
            <div id="chinaMap"></div>
            <div class="right">
                <div class="w100 flex-box">
                    <div class="flex-lave flex-vbox flex-around  flex-center">
                        <div class='fonts48 text'>本年度全国销售额</div>
                        <div class="fonts72 num-y mgT100">999999,999999</div>
                    </div>
                    <div class="flex-lave flex-vbox flex-around  flex-center">
                        <div class='fonts48 text'>当日全国销售额</div>
                        <div class="fonts72 num-y mgT100">999999,999999</div>
                    </div>
                </div>
                <div class="w100 flex-box">
                    <div class="flex-vbox flex-lave ">
                        <div class="text fonts48">当日订单数</div>
                        <div class="mgT100 fonts72 num-y">9999999</div>

                    </div>
                    <div class="flex-vbox flex-lave ">
                        <div class="text fonts48">当日订单环比增长</div>
                        <div id="ring"></div>
                    </div>
                    <div class="flex-vbox flex-lave relative">
                        <div class="text fonts48">分类商品销售占比</div>
                        <div id="pie" class=" "></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-box">

            <div class="left flex-box">
                <div id="province"></div>
                <div class="flex-vbox flex-lave">
                    <div class="flex-box  flex-lave">
                        <div class="flex-lave flex-vbox mgT100  ">
                            <div class='fonts48 text'>当日全省销售额</div>
                            <div class="fonts72 num-y mgT100">999999 </div>
                        </div>
                        <div class="flex-lave flex-vbox mgT100">
                            <div class='fonts48 text  '>当日全省订单量</div>
                            <div class="fonts72 num-y mgT100">999999 </div>
                        </div>
                    </div>
                    <div class="flex-box  flex-lave">
                        <div class="flex-lave flex-vbox ">
                            <div class='fonts48 text '>当日平均客单价</div>
                            <div class="fonts72 num-y mgT100 flex-lave">999999 </div>
                        </div>
                        <div class="flex-lave flex-vbox">
                            <div class='fonts48 text  '>分类商品占比</div>
                            <div id="pie1" class="flex-lave"></div>

                        </div>
                    </div>
                </div>

            </div>
            <div class="right flex-vbox">
                <div class=" flex-box mgT100 pdL100">
                    <div class="flex-lave">
                        <div class='fonts48 text pdR100 '>雄安店当日销售额 </div>
                        <div class="fonts72 num-y mgT100">999999</div>
                    </div>
                    <div class="flex-lave">
                        <div class='fonts48 text pdR100   '>雄安店当日订单量销售额</div>
                        <div class="fonts72 num-y mgT100">100</div>
                    </div>
                </div>
                <div id='linebar' class="flex-lave"></div>
            </div>
        </div>
        <!-- <button class="button num-y" id='fresh'>点 击 刷 新</button> -->
        <img src="./img/refresh.png" class="img-btn" alt="" onclick='refreshData(event,this)'>

        <!-- <i class="fa fa-refresh num-y fonts72 button" aria-hidden="true"></i> -->
    </div>

    <script>
        // 饼图环形图数据格式
        var pieData = [{
                value: 3,
                name: '直接访问'
            },
            {
                value: 7,
                name: '间接访问'
            }, {
                value: 13,
                name: '百度访问'
            },
            {
                value: 2,
                name: '360访问'
            },
            {
                value: 6,
                name: '谷歌访问'
            },
            {
                value: 17,
                name: '我来访问'
            }

        ];
        // 折线图数据
        var linebarData = [{
                name: "5月",
                value: 138,
                perQtyRate: 14.89
            },

            {
                name: "6月",
                value: 114,
                perQtyRate: 79.49
            },

            {
                name: "7月",
                value: 714,
                perQtyRate: 75.8
            },

            {
                name: "8月",
                value: 442,
                perQtyRate: 19.8
            },

            {
                name: "9月",
                value: 622,
                perQtyRate: 44.5
            },

            {
                name: "10月",
                value: 528,
                perQtyRate: 87.3
            }

        ]


        // 中国地图
        var chinaMap = {};
        // 省份地图
        var provinceMap = {};
        // 分类商品销售占比
        var pie = creatChart('pie', pieOption);
        // 分类商品占比
        var pie1 = creatChart('pie1', pieOption);
        //当日环比增长
        var ring = creatChart('ring', ringOption);
        //折线图
        var linebar = creatLineBar();

        linebar.update(linebarData);
        pie.update(pieData)
        pie1.update(pieData)
        ring.update(-0.675)

        //初始化省份
        $.get('data/geometryProvince/' + 11 + '.json', function (data) {
            provinceMap = creatProvinceMap({
                id: 11,
                cid: "110100",
                sid: '110105',
                name: '北京'
            }, data);
            // 省份地图点击事件
            provinceMap.click(function (params) {
                // 业务逻辑
            });
        });
        //初始化中国地图
        $.get('data/json/china.json', function (chinaJson) {
            chinaMap = creatChinaMap(chinaJson);
            chinaMap.click(function (params) {
                $.get('data/geometryProvince/' + params.data.id + '.json', function (data) {
                    provinceMap.update(params, data);
                });
                //业务
            })
        });
    </script>
</body>

</html>